<template>
    <div class="detailbox">
        <div class="d-content">
            <h1 class="title">{{ list.title }}</h1>
            <span class="info-item">发表时间：{{ list.postTime.slice(0,10) }}</span>
            <span class="info-item">发布者：{{ list.nickName }}</span>
           
            <p class="description">{{ list.content }}</p>
        </div>
        <div class="d-pic">
            <img :src="list.pic" v-if="list.pic" class="shoe-img">
            <img src="https://static.nike.com.cn/a/images/f_auto/dpr_1.5,cs_srgb/w_1588,c_limit/0fffd522-864e-4122-b850-d3685a047e2c/hp.jpg" alt="" class="shoe-img" v-else>
        </div>
        <div class="d-foot">
            <span class="foot-item">浏览量：{{ list.viewCount }}</span>
            <span class="foot-item" @click="addLikeCount()">点赞量：{{ list.likeCount }}</span>
            <span class="foot-item">评论量：{{ list.commentCount }}</span>
        </div>
    </div>
</template>

<script>

    export default{
        data(){
            return{
                list:[]
            }
        },
        methods:{
            init(){
                const id = this.$route.params.id; // 获取路由中的动态参数 id
                this.axios.get(`post/detail/${id}`).then((res)=>{
                    window.console.log(res)
                    this.list = res
                })
                this.addViewCounnt(id)
            },
            addViewCounnt(id){
            this.axios.put(`/post/viewCount/${id}`).then((res)=>{
                window.console.log("浏览量加一")
            })
            },
            addLikeCount(){
                this.axios.put(`/post/updateLikeCount/${this.list.id}`).then((res)=>{
                    window.console.log("点赞成功")
                })  
            }

        },
        mounted(){
            this.init()
        }
    }

</script>

<style>
body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    font-family: Arial, sans-serif; 
}

.detailbox {
    width: 80%;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    box-sizing: border-box;
}

.d-content {
    padding: 20px;
}

.info-item {
    color: #666; 
    font-size: 14px; 
    margin-right: 20px;
}

.title {
    color: #333; 
    font-size: 36px; 
    margin-top: 10px;
    margin-bottom: 10px;
}

.description {
    color: #444; 
    font-size: 24px; 
    line-height: 1.6; 
}

.d-pic {
    text-align: center; 
    padding: 20px;
    width: 100%;
    height: 400px;
}

.shoe-img {
    max-width: 100%; 
    border-radius: 8px; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
    height: 100%;

    
}

.d-foot {
    width: 300px;
    /* background-color: #f9f9f9;  */
    /* border-top: 1px solid #e0e0e0;  */
    padding: 10px 20px; 
    margin-left: 20px;
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.foot-item {
    color: #666; 
    font-size: 14px;
    cursor: pointer;
}
</style>